<template>
  <view class="history-list">
    <u-empty v-if="historyList.length  === 0" text="暂无历史记录" mode="list"></u-empty>
    
    <view
      v-for="(item, index) in historyList"
      :key="item.id"  
      class="history-item"
      @click="$emit('viewDetail', item)"
    >
      <view class="item-header">
        <view class="title">{{ item.title  }}</view>
        <view class="sub-title">
          发布于 {{ item.createTime  }} | {{ item.status  === 'completed' ? '已结束' : '进行中' }}
        </view>
      </view>
      <view class="item-body">
        <view class="content">{{ item.content  }}</view>
        <view class="footer">
          <text class="info-text">有效期: {{ item.createTime  }} 至 {{ item.endTime  }}</text>
          <text class="info-text">报名人数: {{ item.applicantsCount  }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    historyList: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style scoped>
.history-list {
  padding: 20rpx;
  background-color: #f7f7f7;
}
.history-item {
  margin-bottom: 24rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  padding: 24rpx;
}
.history-item:active {
  background-color: #f5f5f5;
}
.history-item:last-child {
  margin-bottom: 0;
}
.item-header {
  margin-bottom: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8rpx;
}
.sub-title {
  font-size: 24rpx;
  color: #909399;
}
.content {
  font-size: 28rpx;
  color: #606266;
  margin-bottom: 20rpx;
  line-height: 1.6;
}
.footer {
  display: flex;
  justify-content: space-between;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 16rpx;
}
.info-text {
  font-size: 24rpx;
  color: #909399;
  display: flex;
  align-items: center;
}
.info-text:before {
  content: "";
  display: inline-block;
  width: 6rpx;
  height: 6rpx;
  background-color: #909399;
  border-radius: 50%;
  margin-right: 8rpx;
  vertical-align: middle;
}
</style>